<template>
    <div class = "homeGuesswrapper">
        <div 
        class = "guess-desc "
        :class = "[scrollguesschange]"
        >
            <span>猜你喜欢</span>
            <div class = "blodline"></div>
        </div>
        <router-link 
        tag = "div"
        class = "guess-item"
        v-for = "item of guessList"
        :key = "item.id"
        :to = '"/detail/"+item.id'
        >
            <div class = "guess-item-img">
                <img :src = "item.imgUrl">
            </div>
            <div>{{item.desc}}</div>
            <div>酒店距景点{{item.distance}}Km</div>
            <div><span>￥{{item.price}}</span>起</div>
        </router-link>
        
    </div>
</template>

<script>
export default {
  name: 'homeGuess',
  props:["guessList"],
  data(){
      return{
          scrollguesschange:'',
          
         
      }
  },
  methods:{
      scrollChange(){
          let height = document.documentElement.scrollTop
          
          if(height>700){
              this.scrollguesschange = 'scrollguesschange'
          }else{
              this.scrollguesschange = ' '
          }
      }
  },
  mounted(){
      window.addEventListener('scroll',this.scrollChange)
  }
 
  
}
</script>

<style lang = 'stylus' scoped>
.homeGuesswrapper
    width:100%
    .guess-desc
        width:100%
        text-align:center
        line-height:30px
        color:green
        .blodline
            border 2px
            background:green
            height:2px
            width:1.5rem
            margin: 0 auto
            margin-bottom:10px
    .scrollguesschange
        position:fixed
        top 0.9rem
        left:0
        width:100%
        background:#fff
        z-index:100
    .guess-item
        width:90%
        margin:0 auto
        margin-bottom:20px
        .guess-item-img
            width:100%
            margin:0 auto
        .guess-item-img>img
            width:100%
    .guess-item>div:nth-child(2)
        font-weight:bold
        line-height:20px
        margin-top:5px
        margin-bottom:10px
    .guess-item>div:nth-child(3)
        display:inline-block
    .guess-item>div:nth-child(4)
        display:inline-block
        float:right
    .guess-item>div:nth-child(4)>span
        color:red
        font-weight:bold
        font-size:20px


        
            
    



</style>